﻿<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="description" content="">
		<meta name="author" content="">
		<link rel="shortcut icon" href="./image/favicon.png">

		<title>多媒体</title>

		<!-- Bootstrap core CSS -->
		<link href="./css/bootstrap.min.css" rel="stylesheet">

		<!-- Custom styles for this template -->
		<link href="./css/base.css" rel="stylesheet">

		<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
		<!--[if lt IE 9]>
		<script src="https://oss.maxcdn.com/libs/html5shiv/3.6.2/html5shiv.js"></script>
		<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
		<![endif]-->
		<style>
			
			
		</style>
	</head>

	<body style="">
		<div class="navbar navbar-fixed-top navbar-inverse" role="navigation">
			<div class="container">
				<div class="navbar-header">
					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>

					</button>
					<a class="navbar-brand" href="#">Project name</a>
				</div>
				<div class="collapse navbar-collapse">
					<ul class="nav navbar-nav">
						<li class="active"><a href="#">Home</a></li>
						<li><a href="#about">About</a></li>
						<li><a href="#contact">Contact</a></li>
					</ul>
				</div><!-- /.nav-collapse -->
			</div><!-- /.container -->
		</div><!-- /.navbar -->

		<div class="container">

			<div class="row row-offcanvas row-offcanvas-right">

				<div class="col-xs-12 col-sm-9">
					<div class="pull-right visible-xs">
						<button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Toggle nav</button>
					</div>
					<div class="page">
						<div class="widget empty-item" style="padding-right:0; padding-left:0;">
							<div style="min-height:300px; max-height:400px; margin-bottom:-115px; width:100%;   background-image:url('./image/demo/img2.jpg');"> 添加图片 </div>
							<div class="content-container">
								<div class="title" contentEditable="true">多媒体博客</div>
								<div class="title small" contentEditable="true">全新的博客编辑体验</div>
							</div>							
						</div>
						<div class="widget empty-item active">
							<div class="tools-container">
								<div class="top-toolbar text-right">
									<a class="top-tb-edit" href="#"><span>修改</span></a>
									<a class="top-tb-remove" href="#"></a>	
								</div>
							</div>
							<div class="content-container">
								<div class="title small align-left" contentEditable="true">开始自己的多媒体博客!</div>
							</div>			
						</div>
						<div class="widget empty-item">
							<div class="tools-container">
								<div class="top-toolbar text-right">
									<a class="top-tb-edit" href="#"><span>修改</span></a>
									<a class="top-tb-remove" href="#"><span></span></a>	
								</div>
							</div>
							<div class="content-container">
								<div class="content" contentEditable="true">新浪科技讯 10月23日凌晨消息，苹果公司今日于旧金山芳草地艺术中心召开新品发布会，正式发布了更轻更薄全尺寸iPad Air、搭载Retina显示屏的iPad mini以及新款MacBook Pro，并宣布最新Mac桌面操作系统Mavericks今起免费升级，Mac Pro工作站年底上市。</div>
							</div>					
						</div>
						<div class="widget empty-item">
							<div class="row content-container">
								<div class="col-md-8 content" contentEditable="true">新浪科技讯 10月23日凌晨消息，苹果公司今日于旧金山芳草地艺术中心召开新品发布会，正式发布了更轻更薄全尺寸iPad Air、搭载Retina显示屏的iPad mini以及新款MacBook Pro，并宣布最新Mac桌面操作系统Mavericks今起免费升级，Mac Pro工作站年底上市。</div>
								<div class="col-md-4 img-area"><img class="img-thumbnail img-responsive" src="image/demo/img1.jpg"></div>
							</div>				
						</div>
						<div class="widget empty-item">
							<div class="row content-container">
								<div class="col-md-4 img-area"><img class="img-thumbnail img-responsive" src="image/demo/img2.jpg"></div>
								<div class="col-md-8 content" contentEditable="true">新浪科技讯 10月23日凌晨消息，苹果公司今日于旧金山芳草地艺术中心召开新品发布会，正式发布了更轻更薄全尺寸iPad Air、搭载Retina显示屏的iPad mini以及新款MacBook Pro，并宣布最新Mac桌面操作系统Mavericks今起免费升级，Mac Pro工作站年底上市。</div>
							</div>				
						</div>
						<div class="widget empty-item">
							<div class="row content-container">
								<div class="col-md-12 img-area"><img class="thumbnail" src="image/demo/img1.jpg"><div class="caption"><h3>Thumbnail label</h3><p>Thumbnail label Thumbnail label Thumbnail label</p></div></div>
							</div>				
						</div>
						<div class="widget empty-item">
							<div class="row content-container">
								<div class="col-md-4 img-area"><img class="thumbnail" src="image/demo/img1.jpg"><div class="caption"><h3>Thumbnail label</h3><p>Thumbnail label Thumbnail label Thumbnail label</p></div></div>
								<div class="col-md-4 img-area"><img class="thumbnail" src="image/demo/img2.jpg"><div class="caption"><h3>Thumbnail label</h3><p>Thumbnail label Thumbnail label Thumbnail label</p></div></div>
								<div class="col-md-4 img-area"><img class="thumbnail" src="image/demo/img1.jpg"><div class="caption"><h3>Thumbnail label</h3><p>Thumbnail label Thumbnail label Thumbnail label</p></div></div>
								<div class="col-md-4 img-area"><img class="thumbnail" src="image/demo/img1.jpg"><div class="caption"><h3>Thumbnail label</h3><p>Thumbnail label Thumbnail label Thumbnail label</p></div></div>
								<div class="col-md-4 img-area"><img class="thumbnail" src="image/demo/img1.jpg"><div class="caption"><h3>Thumbnail label</h3><p>Thumbnail label Thumbnail label Thumbnail label</p></div></div>
							</div>				
						</div>
						<div class="widget empty-item">
							<div class="row content-container">
								<div class="col-sm-6 col-md-4 img-area"><img class="thumbnail" src="image/demo/img1.jpg"><div class="caption"><h3>Thumbnail label</h3><p>Thumbnail label Thumbnail label Thumbnail label</p></div></div>
								<div class="col-sm-6 col-md-4 img-area"><img class="thumbnail" src="image/demo/img2.jpg"><div class="caption"><h3>Thumbnail label</h3><p>Thumbnail label Thumbnail label Thumbnail label</p></div></div>
								<div class="col-sm-6 col-md-4 img-area"><img class="thumbnail" src="image/demo/img1.jpg"><div class="caption"><h3>Thumbnail label</h3><p>Thumbnail label Thumbnail label Thumbnail label</p></div></div>
								<div class="col-sm-6 col-md-4 img-area"><img class="thumbnail" src="image/demo/img1.jpg"><div class="caption"><h3>Thumbnail label</h3><p>Thumbnail label Thumbnail label Thumbnail label</p></div></div>
								<div class="col-sm-6 col-md-4 img-area"><img class="thumbnail" src="image/demo/img1.jpg"><div class="caption"><h3>Thumbnail label</h3><p>Thumbnail label Thumbnail label Thumbnail label</p></div></div>
								<div class="col-sm-6 col-md-4 img-area"><img class="thumbnail" src="image/demo/img1.jpg"><div class="caption"><h3>Thumbnail label</h3><p>Thumbnail label Thumbnail label Thumbnail label</p></div></div>
								<div class="col-sm-6 col-md-4 img-area"><img class="thumbnail" src="image/demo/img1.jpg"><div class="caption"><h3>Thumbnail label</h3><p>Thumbnail label Thumbnail label Thumbnail label</p></div></div>
								
							</div>				
						</div>						
					</div>
					
				</div>

				<div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
					<div class="list-group">
						<a href="#" class="list-group-item active">Link</a>
						<a href="#" class="list-group-item">Link</a>
						<a href="#" class="list-group-item">Link</a>
						<a href="#" class="list-group-item">Link</a>
						<a href="#" class="list-group-item">Link</a>
						<a href="#" class="list-group-item">Link</a>
						<a href="#" class="list-group-item">Link</a>
						<a href="#" class="list-group-item">Link</a>
						<a href="#" class="list-group-item">Link</a>
						<a href="#" class="list-group-item">Link</a>
					</div>
				</div><!--/span-->
			</div><!--/row-->

			<hr>

			<footer>
				<p>? Company 2013</p>
			</footer>

		</div><!--/.container-->



		<!-- Bootstrap core JavaScript
		================================================== -->
		<!-- Placed at the end of the document so the pages load faster -->
		<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
		<script src="./js/bootstrap.min.js"></script>
		<script lang="javascript">
			$(document).ready(function() {
			  $('[data-toggle=offcanvas]').click(function() {
			    $('.row-offcanvas').toggleClass('active');
			  });
			  
			});
		
		</script>


	</body></html>